<template>
  <div id="map" class="map-gd" :style="{width: width,height: height}" style="border-radius: 0.09rem;"></div>
</template>
<script>
let markers = []
export default {
  name: 'AMap',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      map: null,
      AMap: null,
      markerlIcon: require('@/assets/sxt-l.png'),
      markercIcon: require('@/assets/sxt-c.png'),
      markerhIcon: require('@/assets/sxt-h.png'),
      chartData: {}
    }
  },
  destroyed() {
    if (this.map) {
      this.map.remove(markers)
      markers = []
    }
  },
  methods: {
    init(data) {
      this.chartData = { ...data }
      this.map = new window.AMap.Map('map', {
        zoom: 18, // 设置地图显示的缩放级别
        center: [120.497328, 30.049707], // 设置地图中心点坐标
        mapStyle: 'amap://styles/darkblue',
        resizeEnable: true
      })
      window.viewDetail = this.viewDetail
      if (this.chartData.points) {
        this.setMarkers(this.chartData.points)
        // console.log('chartData', data, this.chartData)
      }
    },
    setMarkers(points) {
      const data = points
      let newArray = data.map((item) => {
        return {
          ...item,
          icon: item.highAttention > 50 ? this.markerhIcon : item.moderateAttention > 50 ? this.markercIcon : this.markerlIcon,
          // color: item.status === 0 ? '#67c23a' : '#f56c6c',
          lng: item.longitude,
          lat: item.latitude
        }
      })
      this.map.clearMap()
      const copyData = JSON.parse(JSON.stringify(newArray))
      this.setMarketInfoWindow(copyData)
    },
    setMarketInfoWindow(lnglats) {
      markers = []
      this.map.remove(markers)
      let marker
      let LabelsData = []
      let infoWindow = new window.AMap.InfoWindow({
        offset: new window.AMap.Pixel(10, -30)
      })
      for (let i = 0; i < lnglats.length; i++) {
        marker = new window.AMap.Marker({
          map: this.map,
          icon: lnglats[i].icon,
          position: [lnglats[i].lng, lnglats[i].lat]
        })
        marker.content = `
            	<div class="headerMap">
            		 <h1 class="title">${lnglats[i].name}</h1>
            		 <p>无关注度：<span>${lnglats[i].unAttention}</span> 个</p>
            		 <p>低关注度：<span>${lnglats[i].lowAttention}</span> 个</p>
            		 <p>中关注度：<span>${lnglats[i].moderateAttention}</span> 个</p>
            		 <p>中关注度：<span>${lnglats[i].highAttention}</span> 个</p>
            	</div>`
        marker.on('click', markerClick)
        marker.on('mouseover', markerClick)
        // marker.on('mouseout', (e) => {
        //   infoWindow.close(this.map, e.target.getPosition())
        // })
        markers.push(marker)
        let json = {
          name: lnglats[i].name,
          position: [lnglats[i].lng, lnglats[i].lat],
          zooms: [10, 20],
          opacity: 1,
          zIndex: 6,
          icon: {
            type: 'image',
            image: lnglats[i].icon,
            clipOrigin: [370, 92],
            clipSize: [50, 68],
            size: [25, 34],
            anchor: 'bottom-center',
            angel: 0,
            retina: true
          }
        }
        LabelsData.push(json)
      }
      let layer = new window.AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 111,
        opacity: 1,
        collision: true,
        animation: true
      })
      this.map.add(layer)
      LabelsData.forEach((item, index) => {
        item.extData = { index: index }
        const labelMarker = new window.AMap.LabelMarker(item)
        layer.add(labelMarker)
      })
      let $this = this

      function markerClick(e) {
        infoWindow.setContent(e.target.content)
        infoWindow.open($this.map, e.target.getPosition())
      }

      this.map.setFitView()
    },
    viewDetail(row) {
      const params = { id: row }
      this.$emit('click', params)
    }
  }
}
</script>
<style lang="scss" scoped>
.map-gd {
  ::v-deep.amap-info {
    &-content {
      padding: 0;
      border-radius: 0.1rem 0.1rem 0 0;
      background: #202061;
      color: rgba(255,255,255,0.9);
      width: 1.6rem;
      min-height: 1.1rem;
      text-align: left;
    }

    &-sharp {
      border-top-color: #0a4291;
    }

    &-close {
      top: 0.09rem;
      right: 0.1rem !important;
    }
  }

  ::v-deep.headerMap {
    .title {
      background: #02024e;
      color: rgba(255,255,255,0.9);
      font-size: 12px;
      line-height: 18px;
      padding: 0.08rem 0.12rem;
      margin-top: 0rem;
    }

    p {
      padding: 0.02rem 0.12rem 0;
      font-size: 12px;
      color: rgba(255,255,255,0.9);

      span {
        font-weight: 500;
      }
    }

    .btn {
      color: #2E95FF;
      font-size: 14px;
      cursor:pointer;
      text-align: right;
      padding-top: 0;
    }
  }
}
</style>
